<template>
    <el-container>
        <Menu 
        ref="menuRef" 
        />
        <el-main class="main-view p-0">
            <div class="main-view-child">

                <el-scrollbar class="w-full main-scrollbar">
                    <!-- vue页面 -->
                    <router-view 
                    class="router-view w-full main-content relative overflow-auto"
                    v-slot="{Component}"
                    >
                        <KeepAlive :exclude="['UpdateTopic', 'PaperList']">
                            <component :is="Component" />
                        </KeepAlive>
                    </router-view>
                </el-scrollbar>
            </div>
        </el-main>
    </el-container>
    <overlay />
</template>

<script setup lang='ts'>
import Menu from "@/Views/Home/Menu.vue";
import { ref } from "vue";
import overlay from '@/Components/Overlay.vue';

const menuRef = ref<InstanceType<typeof Menu>>();

</script>
    
<style lang="scss" scoped>
.p-0 {
    padding: 0;
}

.main-view {
    height: 100vh;
    background: #F2F2F2;
    .el-breadcrumb {
        height: 26px;
    }
    .main-view-child {
        height: calc(100% - 28px);
        // width: calc(100% - 15px);
        background: #F2F2F2;
        margin: 0 auto;
        padding-left: 14px;
        padding-right: 14px;
        margin-top: 14px;

        .main-scrollbar {
            height: 100%;
            background: #F2F2F2;

            .main-content {
                background: #ffffff;
                height: calc(100vh - 30px);
            }

            .home {
                .box-img {
                    margin-bottom: 67px;
                }
                .text {
                    font-size: 16px;
                    font-weight: 500;
                    color: rgba(0,0,0,0.6);
                }
            }
        }
    }
}
</style>